<template>
  <div>
    <nav-bar>
      <template v-slot:left>&lt;</template>
      <template v-slot:default>用户</template>
    </nav-bar>
    <div class="user-content">
      <img :src="user.avatar_url" alt="" />
      <ul>
        <li>用户昵称：{{ user.name }}</li>
        <li>用户账号：{{ user.email }}</li>
      </ul>
    </div>
    <div class="user-list">
      <ul>
        <li @click="goTo('/order')">我的订单</li>
        <li @click="goTo('/addresslist')">地址管理</li>
        <li>关于我们</li>
      </ul>
    </div>
    <div style="margin: 15px; margin-top: 100px">
      <van-button @click="tologout" round block color="#444">
        退出登录
      </van-button>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import { logout, getUser } from "network/user";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { onMounted, reactive, readonly } from "vue";
export default {
  name: "Profile",
  components: {
    NavBar,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const user = reactive({
      name: "",
      email: "",
      avatar_url: "",
    });

    onMounted(() => {
      getUser().then((res) => {
        console.log(res);
        user.name = res.name;
        user.email = res.email;
        user.avatar_url = res.avatar_url;
      });
    });

    const tologout = () => {
      logout().then((res) => {
        if (res.status && res.status == "204") {
          // alert("退出成功");

          // 清除token
          window.localStorage.setItem("token", "");

          // 在vuex isLogin
          store.commit("setIsLogin", false);

          setTimeout(() => {
            router.push({
              path: "/login",
            });
          }, 500);
        }
      });
    };

    const goTo = (path, query) => {
      router.push({
        path: path,
        query: query || {},
      });
    };

    return {
      tologout,
      user,
      goTo,
    };
  },
};
</script>

<style scoped lang="scss">
.user-content {
  padding: 10px;
  margin-top: 60px;
  width: 90%;
  border-radius: 10px;
  border: 1px solid blue;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  img {
    width: 80px;
    height: 80px;
  }
  ul li {
    padding: 5px;
  }
}
.user-list {
  margin-top: 20px;
  li {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    width: 70%;
    line-height: 50px;
    border-bottom: 1px solid black;
  }
}
</style>
